<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" title="SOP"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<scroll-view :show-scrollbar="false" :scroll-y="false" class="scroll" @scrolltolower="scrolltolowerFn">
				<view class="tabBox">
					<view class="tab-item" v-for="(item,index) in data.list" :key="index" @click="changeIndex(index)">
						<view :class="data.tabIndex == index ?'tab-choice':''">{{item.title}} </view>
					</view>
				</view>

				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head" v-if="data.tabIndex==0">
					<view class="icons family">
						<view class="gui-grid-item  icons_item" v-for="(x,i) in data.qualityTesting" :key='i' @click="goPage(x.path)">
							
							<image :style="{opacity:(pagePermission(x.path)?'1':'0.3')}" class="gui-grid-icon-img  icons_item_img" :src="x.imgPath"></image>
							<text :style="{color:(pagePermission(x.path)?'':'gray')}" class="gui-grid-text gui-primary-text icons_title">{{x.text}}</text>
						  
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
	</gui-page>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {navigate} from '@/utils/routerSkip.js'
import scanCode from "@/components/scan-code/scan-code.vue";
import { hasPagePermission } from "@/common/pagePermission.js"
// 图片地址
import { IMG_BASE_URL } from "@/constant/config.js"
//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const baseUrl = IMG_BASE_URL;

components:{scanCode}

let data=reactive({
	tabIndex:0, //当前访问的index值，默认为0
	list:[{title:'SOP'}],
	tabList:[],

	qualityTesting:[
		{
			path: '/pages/sopPage/sopDetails',
			text: t('materials.details'),
			imgPath: baseUrl+'/afl-app/img/202212191003290923_admin.png'
		},{
			path: '/pages/sopPage/sopList',
			text: t('materials.list'),
			imgPath: baseUrl+'/afl-app/img/202212191003540383_admin.png'
		}
	]
})

//tabs标签点击事件
const changeIndex=(index)=>{
	data.tabIndex=index;
};


// 跳转页面
const goPage=(path) =>{
	console.log(path)
		var hasPermission=hasPagePermission(path);
		if(hasPermission)
		{
			navigate({
				url: path
			})
		}
		else{
			uni.showToast({
				title:'No Permission',
				icon:'none'
			})
			return
		}
};
const scrolltolowerFn = ()=>{

}

</script>

<style lang="scss" scoped>
.family{
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}
//tabs
.tabBox{
	height: 100rpx;
	width: 100%;
	position: relative;
	white-space: nowrap;
	margin-bottom: 30rpx;
	background-color: #fff;
}
.tab-item{
	padding:  15rpx 20rpx;
	position: relative;
	display: inline-block;
	text-align: center;
	transition-property: background-color,width;
	font-size: 36rpx;
}
.tab-choice{
	position: relative;
	color: #37886c;
}

.tab-choice:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -12rpx;
	width: 100%;
	height: 4rpx;
	border-radius: 2rpx;
	background-color: #37886c;
}
// // 删除 底部滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
	display: none;
}
/* #endif */

.icons{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	padding-top: 40rpx;

	&_item{
		width: 33%;

		&_img{
			display: block;
			width: 90rpx;
			height: 90rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
}
.icons_title{
	font-size: 28rpx;
	margin-bottom: 40rpx;
}
</style>
